import { ajax, tools } from './ajax.js';

//#region 查询的部分
let queryInfo = {
  deptName: '',
};

let page = {
  pageNumber: 1,
  pageSize: 5,
};

let list = [];

let txt_q_deptName = document.getElementById('txt_q_deptName');
let btnQuery = document.getElementById('btnQuery');
let btnReset = document.getElementById('btnReset');

btnQuery.addEventListener('click', () => {
  queryInfo.deptName = txt_q_deptName.value;
  page.pageNumber = 1;
  query();
});

btnReset.addEventListener('click', () => {
  txt_q_deptName.value = '';
  btnQuery.click();
});

function query() {
  let params = tools.mergeJson(queryInfo, page);
  ajax.post('/manage/dept/queryAll', params, (data) => {
    if (data.success) {
      list = data.list;
      page = data.page;
      showData();
      showPage();
      return;
    }
    showToast(data.message);
  });
}

query();

//#endregion

//#region 显示数据的部分
let tbData = document.getElementById('tbData');

function showData() {
  tbData.innerHTML = '';
  for (let i = 0; i < list.length; i++) {
    let info = list[i];
    let tr = document.createElement('tr');
    let td;

    // 编号
    td = document.createElement('td');
    td.append(info.deptId);
    tr.append(td);
    // 部门名称
    td = document.createElement('td');
    td.append(info.deptName);
    tr.append(td);
    // 部门简介
    td = document.createElement('td');
    td.append(info.deptInfo);
    tr.append(td);
    // 信息修改时间
    td = document.createElement('td');
    td.append(tools.formatDate(info.lastupdate));
    tr.append(td);
    // 操作的部分
    td = document.createElement('td');
    // 修改
    let btn1 = document.createElement('button');
    btn1.append('修改');
    btn1.classList.add('btn', 'btn-primary', 'btn-sm');
    td.append(btn1);
    btn1.addEventListener('click', () => {
      showModify(info);
    });

    // 删除
    let btn2 = document.createElement('button');
    btn2.append('删除');
    btn2.classList.add('btn', 'btn-danger', 'btn-sm', 'ms-1');
    td.append(btn2);
    btn2.addEventListener('click', () => {
      showDel(info);
    });

    tr.append(td);

    tbData.append(tr);
  }
}

//#endregion

//#region 分页的部分
let btnPre = document.getElementById('btnPre');
let btnPage = document.getElementById('btnPage');
let btnNext = document.getElementById('btnNext');

function showPage() {
  btnPage.innerHTML = `
    当前页/总页数/总记录数：
    ${page.pageNumber}/${page.pageCount}/${page.total}
  `;
}

btnPre.addEventListener('click', () => {
  page.pageNumber--;
  if (page.pageNumber < 1) {
    page.pageNumber = 1;
    return;
  }
  query();
});

btnNext.addEventListener('click', () => {
  page.pageNumber++;
  if (page.pageNumber > page.pageCount) {
    page.pageNumber = page.pageCount;
    return;
  }
  query();
});

//#endregion

//#region 添加的部分
let btnShowAdd = document.getElementById('btnShowAdd');
let addDialog = document.getElementById('addDialog');
let txt_a_deptName = document.getElementById('txt_a_deptName');
let txt_a_deptInfo = document.getElementById('txt_a_deptInfo');
let btnAdd = document.getElementById('btnAdd');

let adialog = new bootstrap.Modal(addDialog);

btnShowAdd.addEventListener('click', () => {
  txt_a_deptName.value = '';
  txt_a_deptInfo.value = '';
  adialog.show();
});

btnAdd.addEventListener('click', () => {
  ajax.post(
    '/manage/dept/add',
    {
      deptName: txt_a_deptName.value,
      deptInfo: txt_a_deptInfo.value,
    },
    (data) => {
      showToast(data.message);
    }
  );
});

addDialog.addEventListener('hidden.bs.modal', query);

//#endregion

//#region 修改的部分
let modifyDialog = document.getElementById('modifyDialog');
let txt_m_deptName = document.getElementById('txt_m_deptName');
let txt_m_deptInfo = document.getElementById('txt_m_deptInfo');
let btnModify = document.getElementById('btnModify');

let mdialog = new bootstrap.Modal(modifyDialog);
let modifyInfo;

function showModify(info) {
  modifyInfo = info;
  txt_m_deptName.value = info.deptName;
  txt_m_deptInfo.value = info.deptInfo;
  mdialog.show();
}

btnModify.addEventListener('click', () => {
  modifyInfo.deptName = txt_m_deptName.value;
  modifyInfo.deptInfo = txt_m_deptInfo.value;

  ajax.post('/manage/dept/update', modifyInfo, (data) => {
    showToast(data.message);
  });
});

modifyDialog.addEventListener('hidden.bs.modal', query);

//#endregion

//#region 删除的部分
let delDialog = document.getElementById('delDialog');
let divDel = document.getElementById('divDel');
let btnDel = document.getElementById('btnDel');

let ddialog = new bootstrap.Modal(delDialog);
let delInfo;

function showDel(info) {
  delInfo = info;
  divDel.innerHTML = `确定删除${info.deptName}吗？`;
  ddialog.show();
}

btnDel.addEventListener('click', () => {
  ajax.post(
    '/manage/dept/delete',
    {
      deptId: delInfo.deptId,
    },
    (data) => {
      showToast(data.message);
      ddialog.hide();
      query();
    }
  );
});

//#endregion

//#region 弹出层提示框
let liveToast = document.getElementById('liveToast');
const toast = new bootstrap.Toast(liveToast);

const toastBody = document.querySelector('#liveToast .toast-body');

function showToast(message) {
  toastBody.innerHTML = message;
  toast.show();
}
//#endregion
